<template>
	<view class="bg">
		<HeaderVue title=""></HeaderVue>
		<view class="tip">
			修改密码
		</view>
		<view class="tip2">
			为确保账户安全，请设置新密码
		</view>
		<input placeholder-class="hint" class="input" placeholder="请输入您的手机号" style="margin-top: 80rpx;" v-model="phone" maxlength="11" inputmode="tel"/>
			<input placeholder-class="hint" class="input" placeholder="请输入旧密码" style="margin-top: 40rpx;" v-model="password" password/>
			<input placeholder-class="hint" class="input" placeholder="请输入新密码" style="margin-top: 40rpx;" v-model="password1" password/>
		<view class="btn row-center" @click="registe">
			确定
		</view>
	</view>
</template>

<script>
	import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				phone:'',
				code:'',
				password:'',
				password1:'',
				checked:false,
				send_message_btn:'获取验证码',
				wait_time:120,
				msg_interval:null,
			}
		},
		methods: {
			async sendCode() {
				if(!this.phone || this.phone.length!=11){
					uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
					return
				}
				let that = this
				var res = await this.$req({
					url:'api/customers/send_forget_message',
					data:{
						phone:this.phone,
					}
				})
				if(res.code == 1) {
					this.msg_interval = setInterval(function() {
						if(that.wait_time <= 0) {
							that.wait_time = 120;
							clearInterval(that.msg_interval)
							that.send_message_btn = '重新获取'
						} else {
							that.wait_time--;
							that.send_message_btn = that.wait_time + '秒后重新发送'
						}
					},1000)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			
			async registe() {
				if(!this.phone || this.phone.length!=11){
					uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
					return
				}
				if(!this.password ){
					uni.showToast({
						title:'请输入旧密码',
						icon:'none'
					})
					return
				}
				if(!this.password1 ){
					uni.showToast({
						title:'请输入新密码',
						icon:'none'
					})
					return
				}
				
				var res = await this.$req({
					url:'api/customers/change_password',
					data:{
						phone:this.phone,
						o_password:this.password,
						n_password:this.password1,
					}
				})
				if(res.code == 1) {
					uni.showToast({
						title:'修改成功,请重新登录',
						icon:'none'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/src/pages/other/login'
						})
					},500)
					
				}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						return
				}
			},
		}
	}
</script>
<style>
	page{
		width: 100vw;
		height: 100vh;
		background: linear-gradient( 180deg, #FFB6C1 0%, #FCE5E5 100%);
	}
</style>
<style lang="scss" scoped>
	.bg{
		padding: 80rpx;
	}
	.tip{
		margin-top: 40rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FF5280;
		line-height: 56rpx;
	}
	.tip2{
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #BF788D;
		line-height: 44rpx;
	}
	.code{
		margin-right: 12rpx;
		padding: 12rpx 16rpx;
		background: linear-gradient( 270deg, #FF5382 0%, #FF64AB 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.25);
		border-radius: 12rpx ;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.title{
		margin-top: 40rpx;
		width: 332rpx;
		height: 64rpx;
	}
	.input{
		padding-left: 30rpx;
		width: 100%;
		height: 88rpx;
		background: #FFEFF3;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FDA2BC;
	}
	.input2{
		height: 88rpx;
	}
	.hint{
		font-weight: 400;
		font-size: 32rpx;
		color: #C48396;
		line-height: 48rpx;
	}
	.btn{
		margin-top: 60rpx;
		width: 100%;
		height: 92rpx;
		background: linear-gradient( 270deg, #FF5382 0%, #FF64AB 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 44rpx;
	}
	.forget{
		width: 112rpx;
		height: 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #BF788D;
		line-height: 44rpx;
	}
</style>
